<!--
 * @Author: kls
 * @Date: 2023-03-14 09:19:54
 * @LastEditTime: 2023-03-14 11:26:15
 * @LastEditors: kls
 * @Description: 
 * @FilePath: \jnks-shengpingtai\src\components\card.vue
-->
<template>
  <div
    class="card-box"
    :style="{ height: cardHeight, backgroundImage: 'url(' + coverImgUrl + ')' }"
  >
    <div
      class="card-title-box"
      :style="{ width: cardBox_Width, height: cardBox_Height }"
    >
      <div class="box-info">
        <template v-if="titleName.length < 11">
          <span class="box-span">{{ titleName }}</span>
        </template>
        <template v-else>
          <el-tooltip
            class="box-span"
            effect="dark"
            :content="titleName"
            placement="top"
          >
            <span class="box-span">{{
              titleName.substring(0, 9) + "..."
            }}</span>
          </el-tooltip>
        </template>
        <span class="box-span-english">{{ titleEName }}</span>
      </div>
      <!-- 工具插槽 -->
      <slot name="tool-slot" />
    </div>
    <!-- 内容 -->
    <slot name="info-slot" />
  </div>
</template>

<script>
export default {
  created() {},
  data() {
    return {};
  },
  props: {
    cardHeight: {
      type: String,
      default: "",
    },
    // 标题
    titleName: {
      type: String,
      default: "",
    },
    titleEName: {
      type: String,
      default: "",
    },
    cardBox_Height: {
      type: String,
      default: "35px",
    },
    cardBox_Width: {
      type: String,
      default: "21vw",
    },
    coverImgUrl: {
      type: String,
      default: require("@/assets/imgs/reverse-record.png"),
    },
  },
  methods: {},
  computed: {},
  watch: {},
  components: {},
};
</script>

<style scoped lang="less">
.card-box {
  box-sizing: border-box;
  padding-top: 1%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .card-title-box {
    background: url("@/assets/imgs/card-heard.png") no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    .box-info {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 80%;
      margin-bottom: 3px;
      span {
        margin-right: 2%;
      }
      .box-span {
        margin-left: 18%;
        font-size: 20px;
        font-family: PangMenZhengDaoBiaoTiTi;
        color: #ffffff;
      }
      .box-span-english {
        font-size: calc(100vw / 1920 * 12);
        font-weight: normal;
        font-style: italic;
        color: #b9e9ff;
        opacity: 0.4;
      }
    }
    .box-tool-slot {
      cursor: pointer;
      position: absolute;
      top: 59%;
      right: -5%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
